<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            padding-top:50px;
            color:#5a5a5a;
            padding-bottom:40px;
        }
        /*轮番广告*/
        .carousel {
            height:500px;
            margin-bottom:60px;
        }
        .carousel .item {
            height:500px;
            background-color:#000;
        }
        .carousel .item img {
            width:100%;
        }
        .carousel-caption {
            z-index:10;
        }
        .carousel-caption p {
            margin-bottom:20px;
            font-size:20px;
            line-height:1.8;
        }

        /*简介*/
        .summary {
            padding-right:15px;
            padding-left:15px;
        }
        .summary .col-md-4 {
            text-align:center;
        }

        /*详情*/
        .feature-divider {
            margin:40px 0;
        }

        .feature {
            padding:30px 0;
        }

        .feature-heading {
            font-size:50px;
            color:#2a6496;
        }
        .feature-heading .text-muted {
            font-size:28px;
        }
        /*响应式布局*/
        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }

            .feature-heading {
                font-size: 34px;
            }

            .feature-heading .text-muted {
                font-size: 22px;
            }
        }

        @media (min-width: 992px) {
            .feature-heading {
                margin-top: 120px;
            }
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">动漫</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">综述</a></li>
                <li><a href="#summary-container">简述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">详情<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#feature-tab" data-tab="tab-huoyin">火影</a></li>
                        <li><a href="#feature-tab" data-tab="tab-quanzhi">全职猎人</a></li>
                        <li><a href="#feature-tab" data-tab="tab-haizei">海贼王</a></li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
            </ul>
        </div>
    </div>
</div>

<!--广告轮播-->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/huoyin-big.gif" alt="1 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>火影忍者</h1>
                    <p>
                        每一位年轻的忍者都在开拓着属于自己的忍道。
                    </p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="javascript:;"
                           role="button" target="_blank">立即观赏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/quanzhi-big.gif" alt="2 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>全职猎人</h1>
                    <p>
                        主人公杰·富力士独自踏上了寻父的征程。
                    </p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="javascript:;" target="_blank"
                           role="button">立即观赏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/haizeiwang-big.gif" alt="3 solid">

            <div class="container">
                <div class="carousel-caption">
                    <h1>海贼王</h1>
                    <p>
                        一个叫路飞的少年开始了以成为海贼王为目标的伟大冒险旅程。
                    </p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="javascript:;" target="_blank"
                           role="button">立即观赏</a>
                    </p>
                </div>
            </div>

        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--主要内容-->
<div class="container summary">
    <!--简介-->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/huoyin-min-logo.gif" alt="huoyin">
            <h2>火影忍者</h2>
            <p>每一位年轻的忍者都在开拓着属于自己的忍道。</p>
            <p><a class="btn btn-default" href="#" role="button">立即观赏</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/quanzhi-min-logo.gif" alt="quanzhi">
            <h2>全职猎人</h2>
            <p>主人公杰·富力士独自踏上了寻父的征程。</p>
            <p>
                <a class="btn btn-default" href="#" role="button">立即观赏</a>
            </p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/haizeiwang-min-logo.gif" alt="haizei">
            <h2>海贼王</h2>
            <p>一个叫路飞的少年开始了以成为海贼王为目标的伟大冒险旅程。</p>
            <p>
                <a class="btn btn-default" href="#" role="button">立即观赏</a>
            </p>
        </div>
    </div>

    <!--详情-->
    <hr class="feature-divider">

    <ul class="nav nav-tabs" role="tablist" id="feature-tab">
        <li class="active"><a href="#tab-huoyin" role="tab" data-toggle="tab">火影忍者</a></li>
        <li><a href="#tab-quanzhi" role="tab" data-toggle="tab">全职猎人</a></li>
        <li><a href="#tab-haizei" role="tab" data-toggle="tab">海贼王</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab-huoyin">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">火影忍者
                        <span class="text-muted">伙伴的友情</span>
                    </h2>
                    <p class="lead">
                        作品设定在一个忍者的世界，故事从主人公漩涡鸣人的孤儿生活开始，他的父母为了保护村子，将攻击村子九尾妖狐封印到了他体内，
                        鸣人因此受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师的关心，鸣人的性格才没有变得扭曲，
                        他总是干劲十足、非常乐观。
                        为了让更多的人认可自己，鸣人的目标是成为火影。整个故事就围绕鸣人的奋斗、成长，鸣人的同伴们的故事，以及这个忍者世界的各种争斗和阴谋展开。
                    </p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/huoyin-logo.gif" alt="huoyin">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-quanzhi">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/quanzhi-logo.gif" alt="quanzhi">
                </div>
                <div class="col-md-7">
                    <h2 class="feature-heading">全职猎人
                        <span class="text-muted">踏实寻父之旅</span>
                    </h2>
                    <p class="lead">
                        主人公杰·富力士从小在鲸鱼岛长大，与米特阿姨和阿婆相依为伴。性格开朗的他，有着能与动物沟通的灵性。
                        因为无父无母，杰将米特阿姨当成自己的生母爱着。直到9岁那一年，杰在森林里被一位青年男子搭救。从他口中杰得知自己的父亲还活着而且职业是猎人。在说服米特阿姨之后，杰独自踏上了寻父的征程。于是，杰决定成为猎人，从这里开始找寻他父亲的踪迹。靠这样一种信念开始了冒险旅途，
                        并在旅途当中结交好友，不断成长，从而引发了后面的所有故事，引出猎人的精彩世界。
                    </p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-haizei">
            <div class="row feature">
                <div class="col-md-7">
                    <h2 class="feature-heading">海贼王
                        <span class="text-muted">征服大海的旅程</span>
                    </h2>
                    <p class="lead">
                        拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，
                        让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，
                        我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。
                        时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，
                        互相争斗。一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程。
                    </p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/haizeiwang-logo.gif" alt="haizei">
                </div>
            </div>
        </div>
    </div>
    <hr class="divider">

    <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="modal-label">关于</h4>
                </div>
                <div class="modal-body">
                    <p>查看更多更热血的动漫，快去土豆网吧，哈哈哈哈</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">好的</button>
                </div>
            </div>
        </div>
    </div>


    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2016 上海</p>
    </footer>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('#menu-nav .navbar-collapse a').click(function (e) {
            var href = $(this).attr('href');
            var tabId = $(this).attr('data-tab');
            if ('#' !== href) {
                e.preventDefault();
                $(document).scrollTop($(href).offset().top - 70);
                if (tabId) {
                    $('#feature-tab a[href=#' + tabId + ']').tab('show');
                }
            }
        });
    });
</script>
</body>
</html>

































